<template>
  <el-container>
    <my-theme-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>Join任务 提交</span>
        </div>
        <el-collapse v-model="activeName">
          <el-collapse-item name="1">
            <template slot="title">
              任务信息&emsp;<i class="header-icon el-icon-info" />
            </template>
            <table style="text-align: left;width:100%;">
              <tr style="background-color: #f4f5f4;">
                <td style="padding:10px;width:180px;font-weight:100;color:#1890ff;">任务名称</td><td>&emsp;{{ message.tskname }}</td>
              </tr>
              <tr>
                <td style="padding:10px;width:180px;font-weight:100;color:#1890ff;">流程名称</td><td>&emsp;{{ message.procname }}</td>
              </tr>
              <tr style="background-color: #f4f5f4;">
                <td style="padding:10px;width:180px;font-weight:100;color:#1890ff;">当前节点</td><td>&emsp;{{ node.nodename }}</td>
              </tr>
            </table>
          </el-collapse-item>
          <el-collapse-item name="2">
            <template slot="title">
              下一节点&emsp;<i class="header-icon el-icon-s-flag" />
            </template>
            <template>
              <el-table :data="next_nodes" style="width: 100%">
                <el-table-column label="选择">
                  <template slot-scope="scope">
                    <el-radio v-model="radio_nodesn" :disabled="!scope.row.optional" :label="scope.row.nodesn" @change="nextNodeChange">{{ scope.row.nodename }}</el-radio>
                  </template>
                </el-table-column>
                <el-table-column prop="nodename" label="节点名称" />
                <el-table-column prop="nodesn" label="节点号" />
              </el-table>
            </template>
          </el-collapse-item>
          <el-collapse-item name="3">
            <template slot="title">
              下一处理人&emsp;<i class="header-icon el-icon-user-solid" />
            </template>
            <template>
              <el-table :data="next_users" style="width: 100%">
                <el-table-column label="选择">
                  <template slot-scope="scope">
                    <el-radio v-model="radio_next_uid" :label="scope.row.id" @change="nextUserChange">{{ scope.row.nickname }}</el-radio>
                  </template>
                </el-table-column>
                <el-table-column prop="nickname" label="用户名称" />
                <el-table-column prop="username" label="用户账户" />
              </el-table>
            </template>
          </el-collapse-item>
        </el-collapse>
      </el-card>
      <el-row style="text-align: center;margin-top:20px;">
        <template>
          <el-button @click="cancel">返回</el-button>
          <el-button type="primary" @click="submitJoinTask">提交</el-button>
        </template>
      </el-row>
    </my-theme-card>
  </el-container>
</template>
<script>
import request from '@/utils/request'
import MyThemeCard from '../../../../components/MyThemeCard/index'
export default {
  components: { MyThemeCard },
  props: { message: Object, taskRemark: Object },
  data: function() {
    return {
      activeName: ['2', '3'],
      // 当前任务节点信息
      node: {},
      // radio选择的下一节点号
      radio_nodesn: {},
      // 选择的下一节点
      selected_next_node: {},
      // 待选的下一节点
      next_nodes: [],
      // 待选的下一节点处理人
      next_users: [],
      // radio选择的处理人
      radio_next_uid: '',
      // 选择的提交人
      selected_next_user: []
    }
  },
  created() {
    this.queryTaskNextNode()
    this.queryNodeByTask()
  },
  methods: {
    // 下一处理人发生变化时
    nextUserChange: function() {
      const self = this
      // 设置选择的用户
      this.selected_next_user = this.next_users.filter(item => {
        return item.id === self.radio_next_uid
      })[0]
    },
    // 下一节点发生变化时
    nextNodeChange: function() {
      const self = this
      // 设置选择的节点
      this.selected_next_node = this.next_nodes.filter(item => {
        return item.nodesn === self.radio_nodesn
      })[0]
      // 设置该节点的可选人员
      this.next_users = this.selected_next_node['allHandleUser']
    },
    // 查询该任务下一指向节点
    queryTaskNextNode: function() {
      request({
        url: '/task/tasklist/queryTaskNextNodes',
        method: 'post',
        data: this.message
      }).then(res => {
        if (res.result) {
          this.next_nodes = res.data || []
          this.autoSelectNextNode()
        } else {
          this.$message.error(res.msg)
        }
      }
      ).catch(() => {
      })
    },
    // 自动选择下一节点
    autoSelectNextNode: function() {
      const choose_nodes = []
      for (let i = 0; i < this.next_nodes.length; i++) {
        const node = this.next_nodes[i]
        if (node.optional) {
          choose_nodes.push(node)
        }
      }
      if (choose_nodes && choose_nodes[0]) {
        // 单选按钮选择
        this.radio_nodesn = choose_nodes[0].nodesn
        // 选择的节点
        this.selected_next_node = choose_nodes[0]
        // 设置待选的处理人
        this.next_users = this.selected_next_node['allHandleUser']
        // 自动选择处理人
        this.autoSelectNextUser()
      }
    },
    // 自动选择处理人
    autoSelectNextUser: function() {
      this.selected_next_user = []
      if (this.next_users) {
        this.selected_next_user.push(this.next_users[0])
        this.radio_next_uid = this.next_users[0].id
      }
    },
    // 查询该任务当前节点
    queryNodeByTask: function() {
      request({
        url: '/task/node/queryNodeByTask',
        method: 'post',
        data: this.message
      }).then(res => {
        if (res.result) {
          this.node = res.data || {}
        } else {
          this.$message.error(res.msg)
        }
      }
      ).catch(() => {
      })
    }, // 提交任务
    submitJoinTask: function() {
      // 将选择的人员覆盖节点中的可选人员
      this.selected_next_node['allHandleUser'] = this.selected_next_user
      if (this.selected_next_node) {
        request({
          url: '/task/tasklist/submitJoinTask',
          method: 'post',
          data: {
            'taskRemark': this.taskRemark,
            'task': this.message,
            'nextNodes': []
          }
        }).then(res => {
          if (res.result) {
            this.$message.success('任务提交成功')
            this.toTaskList()
          } else {
            this.$message.error(res.msg)
          }
        }
        ).catch(() => {
        })
      } else {
        this.$message.error('节点选择错误，节点数:' + this.selected_next_node.length)
      }
    },
    cancel: function() {
      this.$emit('toChangePage', 'list', this.message)
    },
    // 转到详细任务信息
    toTaskList: function() {
      this.$router.push({ name: '我的任务' })
    }
  }
}
</script>
